<template>
  <el-container>
    <el-aside :style="asideStyle">
      <!-- 左边导航部分  -->
      <navbar :menus="menus" :collapse="isCollapse"></navbar>
    </el-aside>

    <!-- 右边部分 -->
    <el-container class="container">
      <!-- 这里是右部的头部 -->
      <el-header>
        <i :class="iconDeg" class="el-icon-s-fold" @click="handleCollapse"></i>
        <div class="hhh">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: 'Yyx' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/user' }"
              >活动列表</el-breadcrumb-item
            >
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-mianxingdianzan"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-rose"></use>
        </svg>

        <!-- 右边头部下拉框 -->
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            {{}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">用户信息</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-circle-plus-outline"
              >修改头像</el-dropdown-item
            >
            <!-- 注意这里的native是一个内置事件方法 -->
            <el-dropdown-item
              icon="el-icon-circle-check"
              @click.native="handleLogout"
              >注销</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>

        <el-dialog
          title="提示"
          :visible.sync="centerDialogVisible"
          width="30%"
          center
        >
          <span>你忍心退出吗 退出可就要重新登路了哦</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirmLogout"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </el-header>
      <!-- 这里是右部的中部 -->
      <el-main>
        <router-view></router-view>
      </el-main>
      <!-- 这里是右部的底部 -->

      <el-footer>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-diamond"></use>
        </svg>
        Copyright © 2021-2021 Hzh. All rights reserved.

        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xianxingkefu"></use>
        </svg>
      </el-footer>
    </el-container>
  </el-container>
</template>


<script>
import routes from "../router/routes";
import Navbar from "./Navbar";
import {clearToken} from "../Utils/auth"
export default {
  components: {
    Navbar,
  },
  data() {
    return {
      isCollapse: false,
      centerDialogVisible: false,
    };
  },
  methods: {
    // 点击注销
    handleLogout() {
      this.centerDialogVisible = true;
    },

    // 注销弹框确认按钮
    handleConfirmLogout() {
      clearToken();
      // localStorage.removeItem("token");
      // localStorage.removeItem("refreshToken");
      this.$router.push("/login");
      this.centerDialogVisible = false;
    },

    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      // console.log(1);
    },

    resolve(arr, parentPath = "") {
      let newArr = [];
      arr.forEach((element) => {
        //判断，父级存在并且路由最后一位不是 '/'
        if (parentPath && parentPath.charAt(parentPath.length - 1) !== "/") {
          parentPath = parentPath + "/";
        } else {
          parentPath;
        }

        element.path = parentPath + element.path;

        //判断是否有子路由 有则继续拼接
        if (element.children && element.children.length > 0) {
          element.children = this.resolve(element.children, element.path);
        }
        // 将路由push到导航栏
        // return newArr.push(element);

        // 如果某路由元数据中，设置为当前路由为隐藏，则当前路由将不作为导航菜单显示，只将其children加入到菜单数组
        // if (element.meta.hidden) {
        //   element.children.forEach((item) => {
        //     let tmp = Object.assign({}, item);
        //     newArr.push(tmp);
        //   });
        // } else {
        //   newArr.push(element);
        // }

        // 隐藏登录路由和根目录
        if (element.meta.hidden === true) {
          if (element.children) {
            element.children.forEach((item) => {
              let tmp = Object.assign({}, item);
              newArr.push(tmp);
            });
          }
        } else {
          newArr.push(element);
        }
      });
      return newArr;
    },
  },
  computed: {
    menus() {
      let route = this.resolve(routes);
      return route;
    },
    asideStyle() {
      return {
        width: this.isCollapse ? "auto" : "200px",
      };
    },
    iconDeg() {
      return {
        "icon-deg": this.isCollapse ? true : "",
      };
    },
  },
  mounted() {
    // if (localStorage.token !== null && localStorage.refreshToken !==null) {
    //   console.log("hahah");
    // } else {
    //   this.$router.push('/');
    // }
  },
};
</script>
<style>
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding-top: 20px;
}

.el-header {
  background-color: #b3c0d1;
  /* color: #333;
  line-height: 60px;
  padding-top: 20px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
  min-height: 750px;
  background-color: rgb(84, 92, 100);
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  min-height: calc(100vh - 120px);
}

/* 防止页面被撑大给中间添加滚动条 */
.container{
  height: 100vh;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 左边导航部分 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 199.5px;
  min-height: 400px;
}
/* 中间头部 */
.hhh {
  display: flex;
  align-items: center;
}

* {
  padding: 0px;
  margin: 0px;
}

.el-icon-s-fold {
  font-size: 1.5rem;
}

.icon-deg {
  transform: rotate(-90deg);
}

.icon {
  font-size: 1.5rem;
}

.icon1 {
  width: 1.5rem;
  padding-left: 400px;
}
</style>

